<template>
  <div id="app_test_loading">
    <div class="box" v-loading1="isLoading">
      <!-- 使用v-for指令遍历list数组   -->
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.id }}-{{ item.text }}</li>
      </ul>
    </div>
    <div class="box2" v-loading1="isLoading2">
      <!-- 使用v-for指令遍历list数组   -->
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.id }}-{{ item.text }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
//import axios from 'axios';
export default {
  name: "AppTestLoading",
  components: {},
  data() {
    return {
      list: [
        { id: 1, text: "JavaScript" },
        { id: 2, text: "Python" },
        { id: 3, text: "Golang" },
      ],
      isLoading: true,
      isLoading2:true,
    };
  },
  async created() {
    setTimeout(() => {
      this.isLoading = false;
    }, 1000);

    setTimeout(() => {
      this.isLoading2 = false;
    }, 2000);
},
  directives:{
    loading1:{
        inserted: function (el,binding) {
            binding.value ? el.classList.add('loading'): el.classList.remove('loading');
        },  
        update: function (el,binding) {
            binding.value ? el.classList.add('loading'): el.classList.remove('loading');
        }
        
    }
  }
};
</script>

<style>
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url("./pictures/_jiazaizhong.png");
}
.box2 {
  width: 330px;
  height: 300px;

  border: solid 1px red;
  position: relative;
}

</style>
